<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>商城后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/dtree.css}" >
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/font/dtreefont.css}" >
    <style>
        body {
            background-color: #ffffff;
        }
        .layui-table-cell {
            height: auto !important;
            white-space: normal;
        }
    </style>
    <style>

        .Ptable {
            margin: 10px 0;
        }
        .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
        }

        .Ptable-item-child {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
        }
        .Ptable dl {
            margin-left: 110px;
        }
        .Ptable-item:after {
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }
        .Ptable-item h3 {
            font-weight: 400;
            width: 110px;
            text-align: right;
            float: left;
            font-size: 12px;
        }
        .Ptable-item dt {
            width: 160px;
            float: left;
            text-align: right;
            padding-right: 5px;
        }

        .Ptable-item dd {
            margin-left: 210px;
        }

        .Ptable-item-dl {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .Ptable-item, .p-parameter {
            border-bottom: 1px solid #eee;
        }
    </style>


</head>
<body>

<span th:replace="common_page::common"></span>


<div class="layuimini-container" style="height:100%">
    <div class="layui-form layuimini-form">
        <div class="layuimini-main" >
            <input type="hidden" name="id" id="id" th:value="${model.id}">
            <input type="hidden" id="attributeKeyValueJson" th:value="${model.attributeKeyValuesJson}">
            <div class="layui-tab layui-tab-brief" lay-filter="productTab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="productInfoTab" >商品信息</li>
                    <li lay-id="commonAttributeTab" id="commonAttributeTab">公共属性</li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label required ">商品名称<a style="color:red;position: absolute;font-weight: bold;line-height: 1.8em;">*</a></label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="required" maxlength="100" lay-reqtext="不能为空" th:value="${model.name}"  placeholder="请输入商品名称" value="" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label required">商品分类<a style="color:red;position: absolute;font-weight: bold;line-height: 1.8em;">*</a></label>
                            <div class="layui-input-block">
                                <input type="hidden" name="categoryId" id="categoryId"  th:value="${model.categoryId}" >
                                <input type="text" readonly  id="selectCategoryId" th:value="${model.categoryName}"  lay-verify="required"  placeholder="请选择商品分类"  class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">所属品牌<a style="color:red;position: absolute;font-weight: bold;line-height: 1.8em;">*</a></label>
                            <div class="layui-input-block">
                                <input type="hidden" name="brandId" id="brandId"  th:value="${model.brandId}" >
                                <input type="text" readonly  id="selectBrand" th:value="${model.brandName}"   lay-verify="required"  placeholder="请选择所属品牌"  class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上架状态</label>
                            <div class="layui-input-block"  th:if="${model.status eq 1}" >
                                <select name="status"  lay-search="">
                                    <option value="1" selected >已上架</option>
                                    <option value="0">未上架</option>
                                </select>
                            </div>
                            <div class="layui-input-block"  th:if="${model.status eq 0}" >
                                <select name="status"  lay-search="">
                                    <option value="1" >已上架</option>
                                    <option value="0" selected>未上架</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item" style="height:90%">


                        <div class="layui-form-item">
                            <label class="layui-form-label ">属性预览</label>
                            <div class="layui-input-block" id="commonAttributeTablePreview">

                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label "></label>
                            <div class="layui-input-block">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script>

    layui.use(['form','element', 'table','carousel','tree','flow'], function () {
        var $ = layui.jquery,
            form = layui.form,
            attributeTable = layui.table,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var carousel = layui.carousel;
        var tree = layui.tree;
        var carouselsku = layui.carousel;
        var flow = layui.flow;
        var loaddingAttributeTree;
        var attributeTotal,attributePageTotal=1,attributeLimit=10,attributeCurrentPage=1;
        var gloablCategoryId = $("#categoryId").val();
        var selectAttributeArray = JSON.parse($("#attributeKeyValueJson").val());
        var loadding;
        var clickOtherCategory =false;
        var defaultLoadAttributeControl = false;





        element.on('tab(productTab)', function(){

            var layId = this.getAttribute("lay-id");

            //公共属性
            if(layId!=null&&layId=="commonAttributeTab") {
                var categoryName = $("#selectCategoryId").val();
                var categoryId = $("#categoryId").val();
                if (categoryId == null || categoryId == "") {
                    layer.msg("请先选择商品分类");
                    layui.element.tabChange('productTab', "productInfoTab");
                    return;
                }

                //首次加载
                if(!clickOtherCategory) {
                    $("#commonAttributeTablePreview").html("");
                    drawAttributeTable();
                }
                gloablCategoryId = categoryId;
            }
        });




        function getAttributeValues(attributeKeyId)
        {
            var attributeValueArray = new Array();
            for(var i=0;i<selectAttributeArray.length;i++)
            {
                var attributeKV = selectAttributeArray[i];
                if(attributeKV.type==2)
                {
                    if(attributeKV.attributeKeyId==attributeKeyId)
                    {
                        attributeValueArray.push(attributeKV);
                    }
                }
            }
            return attributeValueArray;

        }

        function genAttributeKeyChildHtml(attributeKeyId)
        {
            var attributeKeyChildHtml="";
            //查询出所有子节点
            for(var i=0;i<selectAttributeArray.length;i++)
            {
                var attributeKV = selectAttributeArray[i];
                //属性名对象
                if(attributeKV.type==1)
                {
                    if(attributeKV.parentAttributeKeyId==attributeKeyId)
                    {
                        attributeKeyChildHtml+="<div class=\"Ptable-item-child\">";
                        attributeKeyChildHtml+="  <dl style=\"Ptable-item-dl\">";
                        attributeKeyChildHtml+="    <dl class=\"clearfix\" style=\"margin:0\">";
                        attributeKeyChildHtml+="      <dt>"+attributeKV.attributeName+"</dt>";
                        //查询属性值列表
                        var attributeValueArray = getAttributeValues(attributeKV.attributeKeyId);
                        var attributeValues="";
                        for(var j=0;j<attributeValueArray.length;j++)
                        {
                            if(j>0)
                            {
                                attributeValues+="；";
                            }
                            var attributeValueObject = attributeValueArray[j];
                            attributeValues+=attributeValueObject.attributeValue;
                            attributeValues+="&nbsp;";
                        }
                        attributeKeyChildHtml+="       <dd>"+attributeValues+"</dd>";
                        attributeKeyChildHtml+="    </dl>";

                        attributeKeyChildHtml+="<dl class=\"clearfix\" style=\"margin:0\">"
                        attributeKeyChildHtml+=genAttributeKeyChildHtml(attributeKV.attributeKeyId);
                        attributeKeyChildHtml+="</dl>";

                        attributeKeyChildHtml+="  </dl>";
                        attributeKeyChildHtml+="</div>";
                    }
                }
            }
            return attributeKeyChildHtml;
        }

        function attributeSort(a, b) {
            return b.attributeSort - a.attributeSort
        }

        function drawAttributeTable()
        {
            selectAttributeArray.sort(attributeSort);
            var attributeTable="<div class=\"Ptable\">";
            //查询出所有根节点
            for(var i=0;i<selectAttributeArray.length;i++)
            {
                var attributeKV = selectAttributeArray[i];
                //属性名对象
                if(attributeKV.type==1)
                {
                    if(attributeKV.parentAttributeKeyId=="-1")
                    {
                        attributeTable+="<div class=\"Ptable-item\">";
                        attributeTable+="  <h3>"+attributeKV.attributeName+"</h3>";
                        //查询属性值列表
                        var attributeValueArray = getAttributeValues(attributeKV.attributeKeyId);
                        attributeTable+="   <dl style=\"Ptable-item-dl\">";
                        if(attributeValueArray.length>0)
                        {
                            attributeTable+="    <dl class=\"clearfix\" style=\"margin:0\">";
                            var attributeValues="";
                            for(var j=0;j<attributeValueArray.length;j++)
                            {
                                if(j>0)
                                {
                                    attributeValues+="；";
                                }
                                var attributeValueObject = attributeValueArray[j];
                                attributeValues+=attributeValueObject.attributeValue;
                                attributeValues+="&nbsp;";
                            }
                            attributeTable+="       <dd style=\"margin-left: 20px;\">"+attributeValues+"</dd>";
                            attributeTable+="     </dl>";
                        }
                        attributeTable+="	</dl>";
                        attributeTable+="<dl class=\"clearfix\" style=\"margin:0\">";
                        attributeTable+=genAttributeKeyChildHtml(attributeKV.attributeKeyId);
                        attributeTable+="</dl>";
                        attributeTable+="</div>";
                    }
                }
            }
            attributeTable+="</div>";


            $("#commonAttributeTablePreview").html(attributeTable);

        }





    });
</script>
</body>
</html>